// 先使用antd的Modal
import { Modal, Button } from 'antd';
import { Modal as MyModal } from '@/components';

const MyModal1 = () => {
  const [modal, modalContextHolder] = Modal.useModal();

  const [myModal, myModalContextHolder] = MyModal.useModal();
  function handleAntdModal() {
    modal.confirm({
      title: 'antd Modal',
      content: <div style={{ color: 'red' }}>antd Modal</div>,
    });
  }
  function handleAntdInfoModal() {
    modal.info({ title: 'antd Modal', content: 'antd Modal' });
  }
  function handleAntdSuccessModal() {
    modal.success({ title: 'antd Modal', content: 'antd Modal' });
  }
  function handleAntdErrorModal() {
    modal.error({ title: 'antd Modal', content: 'antd Modal' });
  }
  function handleAntdWarningModal() {
    modal.warning({ title: 'antd Modal', content: 'antd Modal' });
  }
  return (
    <div>
      <div>
        {modalContextHolder}
        <Button onClick={handleAntdModal}>antd confirm Modal</Button>
        <Button onClick={handleAntdInfoModal}>antd info Modal</Button>
        <Button onClick={handleAntdSuccessModal}>antd success Modal</Button>
        <Button onClick={handleAntdErrorModal}>antd error Modal</Button>
        <Button onClick={handleAntdWarningModal}>antd warning Modal</Button>
        <Button onClick={handleAntdModal}>antd Modal</Button>
      </div>
      <div>
        {myModalContextHolder}
        <Button onClick={myModal.confirm}>my confirm Modal</Button>
        <Button onClick={myModal.info}>my info Modal</Button>
        <Button onClick={myModal.success}>my success Modal</Button>
      </div>
    </div>
  );
};

export default MyModal1;
